<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>兴趣</title>
    <link href="/image/favicon.ico" rel="shortcut icon" />
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="/js/echarts.js"></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function(){
            var select = [];
            $(".btn").click(function(){
                if($(this).attr("class")=="btn btn-default"){
                    select.push($(this).text());
                    console.log(select);
                    $(this).removeClass("btn-default");
                    $(this).addClass("btn-success");
                }else if($(this).attr("class")=="btn btn-success"){
                    select.splice($.inArray($(this).text(),select),1);
                    console.log(select);
                    $(this).removeClass("btn-success");
                    $(this).addClass("btn-default");
                }else if($(this).attr("class")=="btn btn-danger"){
                    var s = select.join(",");
                    console.log(s);
                    window.location.href="/user/setUserPreference?preference="+s;
                }
            });
        });
        /*]]>*/
    </script>
    <style>
        body {
            margin: 0 auto;
            text-align: center;
            width: 900px}
        .nav-tabs li {
            float: left;
            width: 20%;
            height: 100%;}
        .tab-content{
        }
        .btn{
        }
    </style>
</head>
<body>
<button type="button" class="btn btn-danger">选好了,开始浏览</button>
<p style="font-size: 24px">从以下几个大类中选一些感兴趣的词吧</p>
<ul id="Tab" class="nav nav-tabs">
    <li class="active"><a href="#mx" data-toggle="tab">明星</a></li>
    <li><a href="#ss" data-toggle="tab">时尚</a></li>
    <li><a href="#ys" data-toggle="tab">影视</a></li>
    <li><a href="#cw" data-toggle="tab">宠物</a></li>
    <li><a href="#sh" data-toggle="tab">生活</a></li>
</ul>
<div id="TabContent" class="tab-content">
    <div th:utext="${mx}" class="tab-pane fade in active" id="mx">
        <button type="button" class="btn btn-success">测试</button>
    </div>
    <div th:utext="${ss}" class="tab-pane fade" id="ss">
    </div>
    <div th:utext="${ys}" class="tab-pane fade" id="ys">
    </div>
    <div th:utext="${cw}" class="tab-pane fade" id="cw">
    </div>
    <div th:utext="${sh}" class="tab-pane fade" id="sh">
    </div>
</div>
</body>
</html>